<!-- 标签详情页 -->
<template>
  <div>
      <div class="header">
          <span id="name">人像</span>
          <span id="num">10000组作品</span><br>
          <el-button type="warning" plain v-if="dingyue" @click.prevent="handleDY">订阅</el-button>
          <el-button type="info" plain v-else @click.prevent="handleDY">已订阅</el-button>
      </div>
      <div class="main">
          <div class="title">
              <span id="hot">热门</span>
              <span id="new">最新</span>
          </div>
            <photo-show></photo-show>
      </div>
  </div>
</template>

<script>
import PhotoShow from '../homeMainInfo/photoShow.vue'
export default {
  data () {
    return {
        dingyue:true,
    };
  },
  components:{
      PhotoShow
  },

  methods: {
      handleDY(){
          this.dingyue=!this.dingyue
      }
  }
}

</script>
<style lang='scss' scoped>
.header{
    height: 200px;
    background-color: #EBEEF5;
    padding:50px 100px;
    #name{
        font-size: 40px;
        letter-spacing: 5px;
        font-weight: bold;
    }
    #num{
        font-size: 20px;
        letter-spacing: 5px;
        color:#E6A23C;
        margin-left:30px;
    }
    .el-button{
        margin-top:50px;
    }

}
.main{
    margin:80px 100px;
    span{
        padding-right:50px;
        font-size: 20px;
        letter-spacing: 3px;
    }
}
</style>